<template>
    <div class="mHeader">
        <Header>
            <div class="layout-logo">{{ title }}</div>
            <div class="header-avator-con">
                <div class="user-dropdown-menu-con">
                    <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
                        <Badge dot>
                            <Icon type="ios-bell-outline" style="color:white;" size="20"></Icon>
                        </Badge>
                        <Dropdown transfer trigger="click">
                            <a href="javascript:void(0)">
                                <span class="main-user-name">超级管理员</span>
                                <Icon style="color:white;" type="arrow-down-b"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                                <DropdownItem name="ownSpace">个人中心</DropdownItem>
                                <DropdownItem name="loginout" divided>退出登录</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <Avatar icon="person" style="margin-left: 10px;"></Avatar>
                    </Row>
                </div>
            </div>
        </Header>
    </div>
</template>

<script>
	export default {
	name: 'mMenu',
	data () {
		return {
			title: 'Admin Demo'
		}
	}
}
</script>

<style lang="less" scoped>
.layout-logo{
	width: 140px;
	height: 44px;
	line-height: 44px;   
  	overflow: hidden;
	color: white;
	background: #5b6270;
	position: absolute;
    left: 20px;
    top: 0;
    text-align: center;
    margin: 10px 4px;
    font-size: 14pt;
    font-weight: 600;
}
.header-avator-con{
    position: absolute;
    right: 20px;
    top: 0;
    height: 100%;
    width: 300px;
    .switch-theme-con{
        display: inline-block;
        width: 40px;
        height: 100%;
    }
    .message-con{
        display: inline-block;
        width: 30px;
        padding: 18px 0;
        text-align: center;
        cursor: pointer;
        i{
            vertical-align: middle;
        }
    }
    .change-skin{
        font-size: 14px;
        font-weight: 500;
        padding-right: 5px;
    }
    .switch-theme{
        height: 100%;
    }
    .user-dropdown{
        &-menu-con{
            position: absolute;
            right: 0;
            top: 0;
            width: 150px;
            .main-user-name{
                color: white;
                display: inline-block;
                word-break: keep-all;
                white-space: nowrap;
                vertical-align: middle;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: right;
                margin-left: 10px;
            }
        }
    }
    .full-screen-btn-con{
        display: inline-block;
        width: 30px;
        padding: 18px 0;
        text-align: center;
        cursor: pointer;
        i{
            vertical-align: middle;
        }
    }
    .lock-screen-btn-con{
        display: inline-block;
        width: 30px;
        padding: 18px 0;
        text-align: center;
        cursor: pointer;
        i{
            vertical-align: middle;
        }
    }
}
</style>